<template>
  <div class="createoper-step">
    <div class="xh-type-name">
      <span class="title">基础数据</span>
    </div>
    <el-form :model="formData" ref="dynamicForm" :rules="formRules">
      <div class="createoper-step-2-body">
        <ul>
          <li v-for="(item, index) in formData.list" :key="index">
            <label class="name">{{ item.keyName }}</label>
            <div class="value">
              <el-form-item
                :prop="'list.'+index + '.value'"
                :rules="{
                  required:index===0 || isOpenValidate,
                  message: item.keyName + '不能为空',
                  trigger: ['blur','change'],
                }"
              >
                <el-input size="small" class="x-table-input" v-model="item.value" :placeholder="'请输入'+item.keyName"></el-input>
              </el-form-item>
            </div>
          </li>
        </ul>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Step2",
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    // 是否开启验证
    isOpenValidate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formRules: {}
    };
  },
  watch: {},
  computed: {
    formData: {
      get() {
        console.log(this.data);
        return (
          this.data || {
            list: []
          }
        );
      },
      set(val) {
        this.$emit("update:data", val);
      }
    }
  },
  mounted() {},
  methods: {
    // 如果需要验证，则执行此方法，若是不需要，则不需要了
    // 具体等待接口反馈
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.dynamicForm.validate((valid, field) => {
          if (valid) {
            resolve({});
          } else {
            console.log(field);
            reject("必填信息不能为空");
          }
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.createoper-step-2-body {
  margin-top: 20px;
  ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    li {
      display: flex;

      line-height: 32px;
      border: 1px solid rgba(227, 239, 250, 1);
      border-bottom: none;

      &:nth-child(2n + 1) {
        border-right: none;
      }
      .name {
        background-color: rgba(238, 246, 252, 1);
        color: #333;
        font-weight: 400;
        width: 40%;
        white-space: nowrap;
        font-size: 14px;
        padding: 5px 10px;
      }
      .value {
        padding: 5px 10px;
        flex: 1;
        ::v-deep {
        }
      }
    }
  }
}
</style>
